<template>
  <div class="ripple">
    <div class="topSelect">What a sight the rain and the wind had made her look</div>
    <div class="rippleBox">
      <div class="rippleItem"
           v-for="(item,index) in ripples"
           :class="item.active? 'rippleBg':''"
           @click="() =>_handleChooseRipple(item,index,item.active)"
           :key="index">
        {{item.name}}
      </div>
    </div>
    <div class="changes" @click="_handleRefresh">Refresh</div>
    <div class="meChange">My choice</div>
    <div class="meRipple">
      <div
        class="meRippleItem"
        v-for="(item,index) in chooseRipples"
        :key="index"
        @click="() =>_handleDelRipple(index)"
      >{{item.name}}
      </div>
    </div>
  </div>
</template>

<script>
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'

  const Cookie = process.browser ? require('js-cookie') : undefined
  export default {
    name: 'Ripple',
    data() {
      return {
        page: 1,
        ripples: [],
        chooseRipples: []
      }
    },
    created() {
      this._handleRipple()
    },
    methods: {
      //刷新ripple
      _handleRefresh() {
        this.page++
        this._handleRipple()
      },

      // 获取推荐的ripple
      async _handleRipple() {
        const params = {
          sid: Cookie.get('sid'),
          page: this.page,
          pageSize: 16
        }
        let res = await api.getRipples(params)
        if (res.status == 0) {
          let rippleData = res.data
          rippleData.forEach((item, index) => {
            rippleData[index].active = false
          })
          this.ripples = rippleData
          // this.$router.push({ path: '/login/3' })
        } else {
          Toast(res.info)
        }
      },

      //点击取消选中
      _handleDelRipple(i) {
        let tagId = this.chooseRipples[i].tag_id
        this.chooseRipples.splice(i, 1)
        this.$store.commit('_setRippleData', this.chooseRipples)
        this.ripples.forEach((obj) => {
          if (obj.tag_id == tagId) {
            obj.active = !obj.active
          }
        })
      },

      /**
       * 选择感兴趣的ripple 可多选 改变bg,选中的单独存到一个数组，第二次点击未取消选择
       * @param ripple
       * @param index
       * @private
       */
      _handleChooseRipple(ripple, index, active) {
        this.ripples[index].active = true
        if (!active) {
          this.chooseRipples.push(ripple)
          this.$store.commit('_setRippleData', this.chooseRipples)
        }
      }
    }
  }
</script>

<style lang='scss' scoped>
  .ripple {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 62px;
    font-size: 30px;
    color: #99B3BF;

    .topSelect {
      width: 100%;
      text-align: center;
      font-size: 48px;
      font-weight: 600;
      line-height: 66px;
    }

    .rippleBox {
      margin-top: 50px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-height: 384px;
      overflow: hidden;
      /*width: 100%;*/

      .rippleItem {
        border-radius: 4px 32px 32px 32px;
        margin: 0 8px 34px 8px;
        max-width: 500px;
        padding: 0 20px;
        height: 62px;
        line-height: 62px;
        text-align: center;
        border: 2px solid rgba(143, 167, 179, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &.rippleBg {
          border: none;
          background: url("../../assets/images/19.png") repeat;
          -webkit-background-size: 20%;
          background-size: 20%;
        }
      }
    }

    .changes {
      color: #1FD1C5;
      font-size: 28px;
      height: 48px;
      line-height: 48px;
      font-weight: 600;
      margin: 20px 0 152px 0;
    }

    .meChange {
      margin-bottom: 40px;
    }

    .meRipple {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-height: 210px;
      overflow-y: scroll;

      .meRippleItem {
        margin: 0 8px 34px 8px;
        max-width: 500px;
        padding: 0 20px;
        height: 62px;
        line-height: 62px;
        text-align: center;
        border-radius: 4px 200px 200px 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: url("../../assets/images/19.png") repeat;
        -webkit-background-size: 20%;
        background-size: 20%;
      }
    }
  }
</style>
